import React from 'react'
import { Outlet, useNavigate } from 'react-router-dom'
import './css/home.scss'
import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';
import { Menu, Button } from 'antd';

const items = [
  {
    key: 'sub1',
    label: '首页',
    icon: <MailOutlined />,
  },
  {
    key: 'sub2',
    label: '管理',
    icon: <AppstoreOutlined />,
    children: [
      {
        key: '5',
        label: '内容管理',
      },
      {
        key: '6',
        label: '评论管理',
      },
      {
        key: 'sub3',
        label: '专栏管理',
        children: [
          {
            key: '7',
            label: 'Option 7',
          },
          {
            key: '8',
            label: 'Option 8',
          },
        ],
      },
    ],
  },
  {
    type: 'divider',
  },
  {
    key: 'sub4',
    label: '数据',
    icon: <SettingOutlined />,
    children: [
      {
        key: '9',
        label: 'Option 9',
      },
      {
        key: '10',
        label: 'Option 10',
      },
      {
        key: '11',
        label: 'Option 11',
      },
      {
        key: '12',
        label: 'Option 12',
      },
    ],
  },
];
export default function Home() {
  const navigate = useNavigate()

  const onClick = (e) => {
    console.log('click ', e);
    if (e.key == 'sub1') {
      navigate('/home/list')
    }
  };
  return (
    <div className='home'>
      <div className="header">
        <h1>CSDN创作中心</h1>
      </div>
      <div className="cont">
        <div className="left">
          <Button type="primary" size='large' className='btn' onClick={() => {
            navigate('/add')
          }} style={{ width: '60%', height: '50px', fontSize: '20px', marginLeft: "20%" }}>发布文章</Button>
          <Menu
            onClick={onClick}
            style={{
              width: '100%',
            }}
            defaultSelectedKeys={['1']}
            defaultOpenKeys={['sub1']}
            mode="inline"
            items={items}
          />
        </div>
        <div className="right">
          <Outlet />
        </div>
      </div>
    </div>
  )
}
